/*
 * @Author: FengKongLi 
 * @Date: 2021-09-23 13:05:02 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-09-23 14:01:24
 */
<template>
  <div class="articleContainer">
    <!-- 头部 -->
    <Head></Head>
    <div class="wrapper">
      <div class="title">{{articleDetailData.title}}</div>
      <div class="category">所属栏目：{{articleDetailData.category.name}}&nbsp;&nbsp;&nbsp;发布时间：{{articleDetailData.publishTime | fmtDate}}</div>    
      <div v-html="articleDetailData.content"></div>
    </div>
    <!-- 底部 -->
    <Foot></Foot>
  </div>
</template>

<script>
import { articleFindById } from "../api/index";
import Head from "./components/Head.vue";
import Foot from "./components/Foot.vue";
export default {
  data() {
    return {
        articleId:'',
      articleDetailData: "",

    };
  },
  components: {
    Head,
    Foot,
  },
  created() {
    // console.log(this.$route);
    this.articleId=this.$route.query.id;
   
    this.getarticleDetailData();
  },
  methods: {
    async getarticleDetailData() {
     let res =await articleFindById({id:this.articleId});
    //  console.log(res.data);
    this.articleDetailData=res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  min-height: 500px;
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: black 1px solid;
  .title,.category{
      text-align: center;
  }
  .title{
      font-size: 20px;
  }
}
</style>